<template>
  <div class="upload" style="width: 100%">
    <el-upload
      ref="upload"
      action=""
      :http-request="httprequest"
      multiple
      :limit="node.upload_num_max"
      :on-exceed="onexceed"
    >
      <el-button
        native-type="button"
        slot="trigger"
        size="small"
        type="primary"
      >
        选取文件
      </el-button>
      <template slot="file">
        <span></span>
      </template>
      <div
        class="file-item"
        v-for="(file, index) in node.answer"
        :key="file.uid"
      >
        <div class="file">
          <span>
            <i
              v-if="file.code == 'success'"
              class="el-icon-success"
              style="color: #67c23a"
            ></i>
            <i v-else class="el-icon-info" style="color: #409eff"></i>
            {{ file.name }}
          </span>
          <van-button
            class="del"
            v-if="file.code == 'success'"
            native-type="button"
            square
            type="danger"
            @click="del(index)"
            size="small"
            text="删除"
          />
        </div>
        <div class="progress">
          <el-progress
            type="line"
            v-if="file.code != 'success'"
            :percentage="file.percentage"
            :text-inside="true"
            :stroke-width="15"
          ></el-progress>
        </div>
      </div>
    </el-upload>
  </div>
</template>

<script>
import { uploadFile, fileSuccess, fileCheck } from "@/api/form";
export default {
  props: ["node"],
  data() {
    return {};
  },

  mounted() {},

  methods: {
    httprequest(params) {
      this.$refs.upload.clearFiles();
      let spark = new SparkMD5.ArrayBuffer();
      let fileReader = new FileReader();
      let file = params.file;
      let o = {
        percentage: 0,
        code: "",
        name: file.name,
      };
      this.node.answer.push(o);
      let chunks = [];
      let check = [];
      const size = 10 * 1024 * 1024;
      let cur = size;
      check.push(file.slice(0, cur));
      while (cur < file.size) {
        if (cur + size >= file.size) {
          check.push(file.slice(cur, file.size));
        } else {
          let mid = (cur + size) / 2;
          let end = cur + size;
          check.push(file.slice(cur, cur + 2));
          check.push(file.slice(mid, mid + 2));
          check.push(file.slice(end - 2, end));
        }
        cur += size;
      }

      fileReader.readAsArrayBuffer(new Blob(check));

      fileReader.onload = (e) => {
        cur = 0;
        let max = 4;
        let num = 0;
        spark.append(e.target.result);
        let md5 = spark.end();
        fileCheck({ md5: md5, name: file.name }).then((res) => {
          if (!res.file) {
            let list = res.data;
            while (cur < file.size) {
              if (cur + size >= file.size) {
                chunks.push(file.slice(cur, file.size));
              } else {
                chunks.push(file.slice(cur, cur + size));
              }
              cur += size;
            }

            for (let i = 0; i < chunks.length; i++) {
              let form = new FormData();
              form.set("file", chunks[i]);
              form.set("num", i);
              form.set("md5", md5);
              if (list.indexOf(md5 + "-" + i) == -1) {
                list.push(md5 + "-" + i);
                let t = setInterval(() => {
                  if (max > 0) {
                    max = max - 1;
                    clearInterval(t);
                    uploadFile(form).then((res) => {
                      num++;

                      o.percentage = parseInt((num / chunks.length) * 100);

                      if (num == chunks.length) {
                        form.set("name", file.name);
                        form.set("num", num);
                        form.delete("file");
                        fileSuccess(form).then((res) => {
                          o.id = res.id;
                          o.url = res.file;
                          o.code = "success";
                          delete o.file;
                        });
                      }
                      max += 1;
                    });
                  }
                }, 0);
              } else {
                num++;
                o.percentage = parseInt((num / chunks.length) * 100);
                if (num == chunks.length) {
                  form.set("name", file.name);
                  form.set("num", num);
                  form.delete("file");
                  fileSuccess(form).then((res) => {
                    o.id = res.id;
                    o.url = res.file;
                    o.code = "success";
                    delete o.file;
                  });
                }
              }
            }
          } else {
            o.percentage = 100;
            o.id = res.id;
            o.url = res.file;
            o.code = "success";
            delete o.file;
          }
        });
      };
    },
    onexceed() {},
    del(index) {
      this.node.answer.splice(index, 1);
    },
  },
};
</script>

<style scoped>
.file {
  display: flex;
  justify-content: space-between;
  align-items: center;
  white-space: nowrap;
  position: relative;
  overflow: hidden;
  height: 40px;
}
.file .del{
  position: absolute;
  right: 0px;
}
.file-item {
  margin-top: 15px;
}
.progress >>> .el-progress {
  position: relative;
  top: 10px;
}
.upload >>> .el-upload-list__item {
  transition: none;
}
</style>